<template>
	<view class="container padding-top-sm">
		<view class="bg-white margin-left-sm margin-right-sm padding radius10">
			<image :src="service.logo" mode="widthFix" class="width-sub"></image>
			<view class="flex justify-between align-end margin-top-sm">
				<view class="" style="width: 452rpx;max-width: 452rpx;min-width: 452rpx;">
					<view class="text-15 text-181818">
						{{service.shopName}}
					</view>
					<view class="text-sm text-666 margin-top-sm">

						{{service.address}}

					</view>
					<view class="text-sm text-666" style="margin-top: 46rpx;">
						联系电话：{{service.mobile}}
					</view>
				</view>
				<view class="flex justify-start align-center">
					<view @click="toNavigation" class="flex flex-direction justify-center align-center">
						<image :src="baseUrl + '/static/Promote3.png'" mode="" style="width: 38rpx;height: 38rpx;">
						</image>
						<view class="text-xs text-666 margin-top-xs">
							导航
						</view>
					</view>
					<view @click="callPhone" class="flex flex-direction justify-center align-center"
						style="margin-left: 60rpx;">
						<image :src="baseUrl + '/static/phone2.png'" mode="" style="width: 38rpx;height: 38rpx;">
						</image>
						<view class="text-xs text-666 margin-top-xs">
							拨打
						</view>
					</view>
				</view>
			</view>
		</view>
		<image :src="baseUrl + '/static/home5.png'" mode="widthFix"
			class=" padding-left-sm padding-right-sm width-sub radius10 margin-top-sm"></image>
		<view class="bg-white radius10 margin-sm padding">
			<view class="" v-if="service.description">
				<view class="text-15 text-333">
					公司简介
				</view>
				<view class="text-sm text-666" style="margin-top: 40rpx;">

					{{service.description}}

				</view>
			</view>

				<view class="text-15 text-333" style="margin-top: 60rpx;">
					提供服务
				</view>
			<view class="flex flex-wrap" style="margin: 20rpx 0 0;">
				<view class="color bg-F4F4F4 round margin-left-sm text-df margin-top-sm"
					v-for="item in service.shopServiceSupportList" style="padding: 18rpx 28rpx;">
					{{item.shopServiceName}}
				</view>
			</view>
		</view>
		<view class="bg-white radius10 margin-sm padding">
			<view class="text-15 text-333">
				工程案例
			</view>
			<view class="flex flex-wrap justify-start margin-top position-relative">
				<view v-if="shopProject.length>=9" class="text-white flex justify-center align-center"
					style="background: rgba(0,0,0,.6);width: 210rpx;height: 210rpx;border-radius: 6rpx;position: absolute;right: 0;bottom: 0rpx;z-index: 2;">
					更多
				</view>
				<image :src="item" class="margin-top-xs" v-for="(item,index) in shopProject"
					:class="{'margin-left-xs':(index+3)%3!=0}" mode="" style="width: 210rpx;height: 210rpx;"></image>

			</view>
		</view>
		<view class="bg-white radius10 margin-sm padding">
			<view class="text-15 text-333">
				授权资质
			</view>
			<view class="flex flex-wrap justify-start margin-top position-relative">
				<view v-if="credentialsPic.length>=9" class="text-white flex justify-center align-center"
					style="background: rgba(0,0,0,.6);width: 210rpx;height: 210rpx;border-radius: 6rpx;position: absolute;right: 0;bottom: 0rpx;z-index: 2;">
					更多
				</view>
				<image :src="item" class="margin-top-xs" v-for="(item,index) in credentialsPic"
					:class="{'margin-left-xs':(index+3)%3!=0}" mode="" style="width: 210rpx;height: 210rpx;"></image>

			</view>
		</view>
		<view class="margin-sm flex justify-between align-center" v-if="is_flag">
			<view @click="toPage('/filePage/pages/verified/verified')" class="padding-sm shadow radius10 bg-white"
				style="width: 224rpx;">
				<image :src="baseUrl + '/static/Send_order.png'" mode=""
					style="width: 58rpx;height: 58rpx;min-width: 58rpx;"></image>
				<view class="text-15 text-bold text-221815">
					我要发单
				</view>
				<view class="margin-top-xs text-767696 text-11">
					发布安装维修信息
				</view>
			</view>
			<view class="padding-sm shadow radius10 bg-white" style="width: 224rpx;"
				@click="toPage('/filePage/pages/Ship/Ship')">
				<image :src="baseUrl + '/static/Ship.png'" mode="" style="width: 58rpx;height: 58rpx;min-width: 58rpx;">
				</image>
				<view class="text-15 text-bold text-221815">
					我要发货
				</view>
				<view class="margin-top-xs text-767696 text-11">
					发布跑腿订单
				</view>
			</view>
			<view class="padding-sm shadow radius10 bg-white" style="width: 224rpx;"
				@click="toPage('/filePage/pages/big-screen/big-screen')">
				<image :src="baseUrl + '/static/installation.png'" mode=""
					style="width: 58rpx;height: 58rpx;min-width: 58rpx;"></image>
				<view class="text-15 text-bold text-221815">
					大屏安装
				</view>
				<view class="margin-top-xs text-767696 text-11">
					我要大屏安装
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				shopId: '',
				credentialsPic: [],
				shopProject: [],
				service: {},
				userInfo:{},
				is_flag:''
			};
		},
		onLoad(options) {
			this.is_flag = uni.getStorageSync('is_flag')
			if (options.shopId) {
				this.shopId = options.shopId
				this.getService()
			}
			this.getUser()
		},
		methods: {
			toPage(url) {
				let that = this
				if(that.userInfo.userIdentityStatus==1){
					that.$util.openNewPage(url)
				}else{
					uni.showModal({
						title: '提示',
						content: '您还没有认证',
						cancelText: '再看看',
						confirmText: '去认证',
						success: res => {
							if (res.confirm) {
								that.$util.openNewPage('/filePage/pages/real-name/real-name')
							}
						}
					})
				}
			},
			async getService() {
				const [err, res] = await this.$get(this.$api.shop_detail, {
					id: this.shopId
				})
				if (res) {
					this.service = res.data
					// if(res.data.credentialsPic.indexOf(',')!= -1){
					this.credentialsPic = res.data.credentialsPic.split(',')
					// }else{
					// 	this.credentialsPic = res.data.credentialsPic
					// }
					// if(res.data.shopProject!=null&&res.data.shopProject.indexOf(',')!= -1){
					this.shopProject = res.data.shopProject.split(',')
					// }else{
					// 	this.shopProject = res.data.shopProject
					// }
					// console.log(res)

				}
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.service.mobile //仅为示例
				});
			},
			toNavigation() {
				uni.openLocation({
					latitude: parseFloat(this.service.latitude),
					longitude: parseFloat(this.service.longitude),
					success: function() {
						console.log('success');
					}
				});
			},
			async getUser() {
				const [err, rs] = await this.$get(this.$api.userDetail)
				if (rs) {
					// console.log(rs)
					this.userInfo = rs.data
					uni.setStorageSync('userInfo', rs.data);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
